```jsx
import * as {{component}} from "@zag-js/{{component}}"
import { useMachine, normalizeProps } from "@zag-js/react"
import { useId } from "react"

function {{titleCase component}}() {
  const service = useMachine({{component}}.machine({ id: useId() }))

  const api = {{component}}.connect(service, normalizeProps)

  return (
    <div {...api.getRootProps()}>
      <div {...api.getControlProps()}>...</div>
    </div>
  )
}
```
